<template>
  <div>
    <div class="lov">
      <div class="lovtop" @click="$router.push('/userInfo')">
        <img src="../../assets/Search/46.png" alt="" />
        <span>我的收藏</span>
      </div>
    </div>

    <div class="lovcentr">
      <div class="biao"><span>歌手:</span></div>
      <ul>
        <li v-for="(item, index) in singlists" :key="index">
          <div class="lovcentron">
            <!-- <span>name:</span> -->
            <span>{{ item.name }}</span>
          </div>
          <div class="lovcentrto">
            <img :src="item.img1v1Url" alt="" />
          </div>
        </li>
      </ul>
    </div>

    <div class="lovcentr">
      <div class="biao"><span>MV:</span></div>
      <ul>
        <li v-for="(item, index) in mvlists.data" :key="index">
          <div class="lovcentron">
            <!-- <span>name:</span> -->
            <span>{{ item.title }}</span>
          </div>
          <div class="lovcentrto">
            <img :src="item.coverUrl" alt="" />
          </div>
        </li>
      </ul>
    </div>

    <div class="lovcentr">
      <div class="biao"><span>专辑:</span></div>
      <ul>
        <li v-for="(item, index) in lists.data" :key="index">
          <div class="lovcentron">
            <!-- <span>name:</span> -->
            <span>{{ item.name }}</span>
          </div>
          <div class="lovcentrto">
            <img :src="item.picUrl" alt="" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  getollection,
  getollsublist,
  getolmvlsublist,
  getolartistsublist,
//   getsinger,
} from "@/api/land";
export default {
  data() {
    return {
      lists: [],
      mvlists: [],
      singlists: [],
    };
  },
  methods: {
    // Fungetsinger() {
    //   getsinger({id : this.$route.query.userId}).then((data) => {
    //     if (data.code == 200) {
    //       console.log(data);
    //     }
    //   });
    // },

    Fungetollection() {
      getollection().then((data) => {
        if (data.code == 200) {
          //   console.log(data);
        }
      });
    },
    Fungetollsublist() {
      getollsublist().then((data) => {
        if (data.code == 200) {
          this.lists = data;
          //   console.log(this.lists);
        }
      });
    },
    Fungetolmvlsublist() {
      getolmvlsublist().then((data) => {
        if (data.code == 200) {
          this.mvlists = data;
          //   console.log(this.mvlists);
        }
      });
    },
    Fungetolartistsublist() {
      getolartistsublist().then((data) => {
        if (data.code == 200) {
          this.singlists = data.data;
          console.log(this.singlists);
        }
      });
    },
  },
  created() {
    this.Fungetollection();
    this.Fungetollsublist();
    this.Fungetolmvlsublist();
    this.Fungetolartistsublist();
    // this.Fungetsinger()
  },
};
</script>

<style lang="less" >
.lov {
  width: 100%;
  .lovtop {
    width: 100%;
    height: 40px;
    background: #ee534f;
    box-sizing: border-box;
    position: relative;
    img {
      width: 30px;
      height: 30px;
      display: inline-block;
      position: absolute;
      top: 4px;
      left: 5px;
    }
    span {
      position: absolute;
      color: white;
      top: 7px;
      left: 40%;
    }
  }
}
.lovcentr {
  width: 100%;
  margin-bottom: 10px;
  .biao {
    width: 100%;
    box-sizing: border-box;
    padding-top: 10px;
    padding-left: 5px;
    span {
      font-size: 20px;
      font-weight: bold;
      color: gray;
    }
  }
  ul {
    width: 100%;
    li {
      width: 100%;
      height: 90px;
      box-sizing: border-box;
      display: flex;
      padding: 10px;
      .lovcentron {
        width: 70%;
        height: 100%;
        padding-left: 5px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        box-sizing: border-box;
        border-bottom: 2px solid #ee534f;
        border-left: 2px solid #ee534f;
        border-top: 2px solid #ee534f;
        display: flex;
        justify-content: end;
        align-items: center;
        span {
          color: gray;
        }
        span:nth-child(1) {
          font-size: 18px;
          margin-right: 5px;
        }
        span:nth-child(2) {
          margin-top: 5px;
        }
      }
      .lovcentrto {
        width: 30%;
        height: 100%;
        box-sizing: border-box;
        padding-right: 5px;
        border-top: 2px solid #ee534f;
        // border-right: 2px solid #ee534f;
        // border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        img {
          width: 50px;
          height: 50px;
          border-radius: 10px;
        }
      }
    }
  }
}
</style>